feat(badges): cool loading message

1 files changed, 11 insertions, 0 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 551efaf5..1539c587 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -13,6 +13,7 @@
 	import locale from '$stores/locale.js';
 	import Skeleton from '$lib/Skeleton.svelte';
 	import RateLimited from '$lib/Error/RateLimited.svelte';
+	import Message from '$lib/Loading/Message.svelte';
 	// import { io } from 'socket.io-client';
 
 	export let data;
@@ -290,15 +291,21 @@
 	</div>
 {:else}
 	{#await currentUserIdentity}
+		<Message message="Loading user ..." />
+
 		<Skeleton grid={true} count={100} width="150px" height="170px" />
 	{:then identity}
 		{@const isOwner = identity && identity.name === data.username}
 
 		{#await badgesPromise}
+			<Message message="Loading badges ..." />
+
 			<Skeleton grid={true} count={100} width="150px" height="170px" />
 		{:then badgesResponse}
 			{#if badgesResponse}
 				{#await badgesResponse.json()}
+					<Message message="Parsing badges ..." />
+
 					<Skeleton grid={true} count={100} width="150px" height="170px" />
 				{:then ungroupedBadges}
 					<div id="badges">
@@ -340,6 +347,8 @@
 						{/await}
 
 						{#if ungroupedBadges === null}
+							<Message message="Loading badges ..." />
+
 							<Skeleton grid={true} count={10} width="150px" height="170px" />
 						{:else if ungroupedBadges.length === 0}
 							<div class="card">
@@ -515,6 +524,8 @@
 					<div class="card">Could not parse badges</div>
 				{/await}
 			{:else}
+				<Message message="Loading badges ..." />
+
 				<Skeleton grid={true} count={100} width="150px" height="170px" />
 			{/if}
 		{:catch}